<%@ page language="java" contentType="text/html; charset=UTF-8"	pageEncoding="UTF-8"%>
<%@include file="/white/common/common.jsp"%>
<%@include file="/white/common/taglibs.jsp"%>
<html>
	<head>
		<script type="text/javascript" src="bigdata/js/jquery.min.js"></script>
		<script type="text/javascript" src="bigdata/js/echart/echarts.js"></script>
		<!-- jquery ui 使用的样式 -->
		<link rel="stylesheet" type="text/css" href="bigdata/js/jquery-ui/jquery-ui.min.css"/>
		<!-- jquery ui multiselect 使用的样式 -->
		<link rel="stylesheet" type="text/css" href="bigdata/js/jquery-ui/jquery.multiselect.css"/>

		<script type="text/javascript" src="bigdata/js/jquery-ui/jquery-ui.min.js"></script>
		<script type="text/javascript" src="bigdata/js/jquery-ui/jquery.multiselect.min.js"></script>

		<script type="text/javascript">
        <!--
        function submitForm(){
            var searchForm=document.getElementById("searchForm");
            searchForm.submit();
        }
        
        function notAllowedLockSelf(id){           
            var searchForm=document.getElementById("searchForm");
            searchForm.action="userAction-"+id+"!lock.action";
            searchForm.submit();            
        }
        
        function validateModify(){        	
        	var check = document.getElementsByName("selectedIds");
        	var a = 0;
            var id;
           
            for(var i=0;i <check.length;i++){
                if(check[i].checked==true){
                    a++;
                    id = check[i].value;
                }
            }
            
            if(a == 1){            	
            	var searchForm=document.getElementById("searchForm");
            	searchForm.action="nspOnofflogTaVersionDayAction-"+id+"!toEdit.action";
            	searchForm.submit();
                return true;
            }else{
                alert("请�?择一条记�?");
                return false;
            }
        }        
        
        function validateDelete(){
            var check=document.getElementsByName("selectedIds");
            var a=false;
            for(var i=0;i <check.length;i++){
                if(check[i].checked==true){
                    a=true;
                    break;
                }
            }
            if(a){
                return confirm('你确定所�?');
            }else{
                alert("请先择你要删除的内容!!");
                return false;
            }
        }

        function doDelete(){
            var searchForm=document.getElementById("searchForm");
            searchForm.action='nspOnofflogTaVersionDayAction!delete.action';
            searchForm.submit();
            return true;
        }
        
        function displayResult(){
            var result = "<s:property value='result'/>";
            if(result != null && result != ""){
                alert(result);
            }
        }

		function excel(){
			var searchForm=document.getElementById("searchForm");
			searchForm.action=  'nspOnofflogTaVersionDayAction!exportExcel.action';
			searchForm.submit();
		}
		$(function(){
				$("#regionName").dblclick(function(){
					window.open("<%=request.getContextPath()%>/nspOnofflogImeiDayregionSumAction!queryChannel.action?flag=2",null,
							"width=300,height=500,toolbar=no,scrollbars=yes,resizable=no,status=no,location=no,top=152,left=225");
				});

				$(":submit").click(function(){
					var beginday = $("#query_logDate").val();
					var endday = $("#query_logDate_end").val();
					if(beginday == "" || endday == ""){
						alert("选择起始时间");
						return false;
					}else{
						$("#searchForm").submit();
					}
				});
			});

    //-->
    </script>

		<style>
			#ask-ico {
				position: relative;
				display: inline-block;
			}

			#ask-ico .ask-con {
				position: absolute;
				background: #666C6C;
				border: 1px solid #ccc;
				left: 100%;
				top: 0;
				width: 300px;
				height: 200px;
				padding: 10px;
				display: none;
				color: #fff;
				font-size: 13px;
				font-weight: bold;
				overflow:scroll;
				overflow-x:auto;
			}

			#ask-ico:hover .ask-con {
				display: block;
			}

			.margin-bottom {
				font-size: 13px;
				font-weight: bold;
			}

			.highlight {
				font-size: 13px;
				color: #5DDCE2;
				font-weight: bold;
			}
		</style>

	</head>



	<body onload="displayResult()">
		<s:form method="post" action="nspOnofflogTaVersionDayAction!queryByPage.action" theme="simple"
			id="searchForm">
			<div id="div_title">
				<h3>日用户分版本统计（新版）<a id="ask-ico"> <img src="img/q.png" />

							<div class="ask-con">
								<p>
									<span class="highlight">活跃用户数：</span>统计当天，有使用手机或PAD登陆过号码百事通客户端的总用户数，去重
								</p>

								<p>
									<span class="highlight">累计用户数：</span>统计当天，主动打开号码百事通客户端的总用户数，去重；
								</p>
								<p>
									<span class="highlight">新增用户数：</span>统计周期内，首次使用手机或PAD登陆号码百事通客户端的用户数，去重；
								</p>

							</div>
						</a>

				</h3>
				<div id="div_search">
					<table>
					    <tr>
					    <!-- 查询条件 -->

							<td width="80" align="right">
								日期:
							</td>
							<td>
								<s:textfield size="8" maxlength="10" id="query_logDate"
											 name="query_logDate" label="日期"
											 onfocus="WdatePicker({skin:'whyGreen',dateFmt:'yyyyMMdd', minDate:'1900-01-01',maxDate:''})">
								</s:textfield> - <s:textfield size="8" maxlength="10" id="query_logDate_end"
															  name="query_logDate_end" label="日期"
															  onfocus="WdatePicker({skin:'whyGreen',dateFmt:'yyyyMMdd', minDate:'1900-01-01',maxDate:''})">
							</s:textfield>
							</td>

							<td width="60" align="right">版本</td>
							<td><s:textfield id="query_appVersion" name="query_appVersion" /></td>

							<td width="80" align="right">
								<authz:authorize ifAnyGranted="SMOOTH_ALL">
									<s:submit cssClass="submit_search" value="搜索" action="nspOnofflogTaVersionDayAction!queryByPage" />
                       			</authz:authorize>
							</td>

							<td width="80" align="right">
								<authz:authorize ifAnyGranted="OMC_PROD_GROUP">
									<input type="button" cssClass="input_button" value="导出"
										   onClick="excel();document.getElementById('searchForm').action= 'nspOnofflogTaVersionDayAction!queryByPage.action';" />
								</authz:authorize>
							</td>

						</tr>
					</table>
				</div>
			</div>



			<!--列表 -->
			<table cellpadding="0" cellspacing="0" class="t_list">
				<tr>
					<th colspan="3" style="BORDER: #DC2913 1px solid;"></th>
					<th colspan="2" style="BORDER: #DC2913 1px solid;">系统</th>
					<th colspan="2" style="BORDER: #DC2913 1px solid;"></th>
				</tr>
				<tr>
					<!--列表头部 -->
					<th style="border-left: #DC2913 1px solid;">日期</th>
					<th>版本号</th>

					<th style="border-right: #DC2913 1px solid;">活跃用户数</th>

					<th>Android活跃用户数</th>
					<th style="border-right: #DC2913 1px solid;">ios活跃用户数</th>

					<th>累计用户数</th>
					<th style="border-right: #DC2913 1px solid;">新增用户数</th>
				</tr>
				<s:iterator value="resultList" status="sindex">
					<tr>
						<td style="border-left: #DC2913 1px solid;"><s:property
								value="LOG_DATE" /></td>
						<td><s:if test='%{APP_VERSION == "A"}'>-</s:if> <s:else>
							<s:property value="VERSION" />
						</s:else></td>

						<td><s:property value="IMEI_DAY_COUNT" /></td>

						<td style="border-left: #DC2913 1px solid;"><s:if
								test="%{ANDROID_COUNT == null}">-</s:if> <s:else>
							<s:property value="ANDROID_COUNT" />
						</s:else></td>
						<td><s:if test="%{IOS_COUNT == null}">-</s:if> <s:else>
							<s:property value="IOS_COUNT" />
						</s:else></td>

						<td style="border-left: #DC2913 1px solid;"><s:property
								value="IMEI_ALL_COUNT" /></td>
						<td style="border-right: #DC2913 1px solid;"><s:property
								value="IMEI_NEW_COUNT" /></td>
					</tr>
				</s:iterator>
			</table>

			<!--列表 结束 -->
			<!--分页 -->
			<s:if test="resultList.size() > 0">
				<table border="0" cellspacing="0" cellpadding="0" class="t_bottom">
					<tr>
						<td><%@include file="/white/common/pageList.jsp"%></td>
					</tr>
				</table>
			</s:if>
			<!--分页 结束 -->
		</s:form>

		<div id="main" style="width:100%;height: 250px;"></div>
		<script type="text/javascript">
			require.config({
				paths: {
					echarts: 'bigdata/js/echart'
				}
			});
			require(
					[
						'echarts',
						'echarts/chart/line',
						'echarts/chart/bar'
					],
					function (ec) {
						var myChart = ec.init(document.getElementById('main')).showLoading({effect: 'bubble'});
						myChart.hideLoading();
						var beginday = $("#query_logDate").val();
						var endday = $("#query_logDate_end").val();
						if (beginday != "" && endday != "") {
							myChart.showLoading({
								text: '正在努力的读取数据中...',
							});
							$.ajax({
								url: 'nspOnofflogTaVersionDayAction!getChart.action',
								dataType: 'json',
								contentType: "application/x-www-form-urlencoded; charset=UTF-8",
								data: encodeURI(encodeURI(decodeURIComponent($('#searchForm').serialize(), true))),
								success: function (data) {
									if (data != null) {
										myChart.setOption(data);
									}
									myChart.hideLoading();
								}
							});
						}

					}
			);
		</script>

	</body>
</html>
